<template>
    <div class="ly-box">
        <div class="ly-center">
            <el-row><h1>智慧社区大数据展示中心</h1></el-row>
            <el-row :gutter="20">
                <el-col :span="6">
                    <!--门禁 出入信息-->
                    <div class="grid-content door-box">
                        <div class="ly-title">
                            <p>门禁·出入信息 <a href="#">查看更多</a> </p>
                        </div>
                        <div class="door-wrap">
                            <div class="door-title">
                                <el-row>
                                    <el-col class="userName" :span="4">姓名</el-col>
                                    <el-col class="dtuAdress" :span="6">位置</el-col>
                                    <el-col class="houseName" :span="8">小区名</el-col>
                                    <el-col class="openTime" :span="5">时间</el-col>
                                </el-row>
                            </div>
                            <ul id="door-ul"  :class="{anim:animate==true}">
                                <li v-for='item in doors' class="doors-li">
                                    <el-row >
                                        <el-col class="userName" :span="4">{{item.userName}}</el-col>
                                        <el-col class="dtuAdress" :span="6">{{item.dtuAdress}}</el-col>
                                        <el-col class="houseName" :span="8">{{item.houseName}}</el-col>
                                        <el-col class="openTime" :span="5">{{item.openTime}}</el-col>
                                    </el-row>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--停车场 出入信息-->
                    <div class="grid-content car-box">
                        <div class="ly-title">
                            <p>停车场·出入信息 <a href="#">查看更多</a> </p>
                        </div>
                        <div class="car-wrap">
                            <div class="car-title">
                                <span class="number">车牌号</span>
                                <span class="road">出入口</span>
                                <span class="name">停车场</span>
                                <span class="time">时间</span>
                            </div>
                            <ul :class="{anim: animate==true}">
                                <li v-for="item in cars">
                                    <span class="number">{{item.number}}</span>
                                    <span class="road">{{item.road}}</span>
                                    <span class="name">{{item.name}}</span>
                                    <span class="time">{{item.time}}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--报事报修-->
                    <div class="grid-content repair-box">
                        <div class="ly-title">
                            <p>报事报修<a href="#">查看更多</a> </p>
                        </div>
                        <div class="repair-title">最新最近处理</div>
                        <div class="repair-item">
                            <div class="txt">当日</div>
                            <div class="num">1</div>
                            <div class="bit">次数</div>
                        </div>
                        <div class="repair-item">
                            <div class="txt">本周</div>
                            <div class="num">1</div>
                            <div class="bit">次数</div>
                        </div>
                        <div class="repair-item">
                            <div class="txt">本月</div>
                            <div class="num">2</div>
                            <div class="bit">次数</div>
                        </div>
                        <div class="repair-item">
                            <div class="txt">当年</div>
                            <div class="num">5</div>
                            <div class="bit">次数</div>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content banner-box">
                        <el-carousel height="500px">
                            <el-carousel-item v-for="(item,index) in banners" :key="index">
                                <div class="img-bg" :style="{backgroundImage: 'url(' + item.url + ')'}">
                                </div>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <!--金额统计-->
                    <div class="grid-content money-box">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                支付方式扇形图
                            </el-col>
                            <el-col :span="16">
                                表格统计
                            </el-col>
                        </el-row>
                    </div>
                </el-col>
                <!--驿站-->
                <el-col :span="6">
                    <div class="grid-content pack-box">
                        <div class="pack-item">
                            <span>今日入库量:180</span>
                        </div>
                        <div class="pack-item">
                            <span>今日出库量:198</span>
                        </div>
                        <div class="pack-item">
                            <span>库存总量：225</span>
                        </div>
                    </div>
                    <!--缴费-->
                    <div class="grid-content pay-box">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                缴费类型扇形图
                            </el-col>
                            <el-col :span="16">
                                缴费列表
                            </el-col>
                        </el-row>
                    </div>
                    <!--投诉建议-->
                    <div class="grid-content advise-box">
                        <div class="repair-title">最新最近处理</div>
                        <div class="repair-item">
                            <div class="txt">当日</div>
                            <div class="num">1</div>
                            <div class="bit">次数</div>
                        </div>
                        <div class="repair-item">
                            <div class="txt">本周</div>
                            <div class="num">1</div>
                            <div class="bit">次数</div>
                        </div>
                        <div class="repair-item">
                            <div class="txt">本月</div>
                            <div class="num">2</div>
                            <div class="bit">次数</div>
                        </div>
                        <div class="repair-item">
                            <div class="txt">当年</div>
                            <div class="num">5</div>
                            <div class="bit">次数</div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>


</template>

<script>
    export default {
        data() {
            return {
                animate: false,
                doors: [
                    {userName: '王丽丽', dtuAdress: '东大门', houseName: '金色时代',  openTime: '09:08'},
                    {userName: '玲玲', dtuAdress: '东大门', houseName: '金色时代',  openTime: '09:08'},
                    {userName: '马东敏', dtuAdress: '东大门', houseName: '金色时代',  openTime: '09:08'},
                    {userName: '韩丽娟', dtuAdress: '东大门', houseName: '金色时代',  openTime: '09:12'},
                    {userName: '王勤', dtuAdress: '东大门', houseName: '金色时代',  openTime: '09:58'},
                    {userName: '王丽莎', dtuAdress: '东大门', houseName: '金色时代',  openTime: '09:28'},
                    {userName: '方红', dtuAdress: '东大门', houseName: '金色时代',  openTime: '09:18'},
                ],
                cars: [
                    {number: '渝D·730B2', road: '一号门', name: '王有有', time: '08:05'},
                    {number: '渝B·730B2', road: '一号门', name: '方红', time: '12:07'},
                    {number: '川C·730B2', road: '三号门', name: '周磊磊', time: '09:09'},
                    {number: '渝D·730B2', road: '二号门', name: '王红', time: '09:15'},
                    {number: '渝B·730B2', road: '三号门', name: '王涵', time: '10:05'},
                    {number: '渝D·730B2', road: '一号门', name: '张明', time: '09:49'},
                    {number: '渝A·730B2', road: '一号门', name: '--', time: '09:22'},
                    {number: '渝D·730B2', road: '一号门', name: '利于明', time: '09:31'},
                ],
                banners: [
                    {
                        name: 'banner1',
                        url: 'http://oss.siyueluo.com/deptImage%2F73_loginPic.jpg'
                    },
                    {
                        name: 'banner2',
                        url: 'http://oss.siyueluo.com/deptImage%2F73_loginPic.jpg'
                    },
                    {
                        name: 'banner3',
                        url: 'http://oss.siyueluo.com/deptImage%2F73_loginPic.jpg'
                    }
                ],
            }
        },
        created() {
            // setInterval(this.scroll, 1000)
        },
        methods: {
            scroll() {
                this.animate = true;    // 因为在消息向上滚动的时候需要添加css3过渡动画，所以这里需要设置true
                setTimeout(() => {      //  这里直接使用了es6的箭头函数，省去了处理this指向偏移问题，代码也比之前简化了很多
                    this.doors.push(this.doors[0]);  // 将数组的第一个元素添加到数组的
                    this.doors.shift();               //删除数组的第一个元素
                    this.animate = false;  // margin-top 为0 的时候取消过渡动画，实现无缝滚动
                }, 500)
            }
        }

    }
</script>


<style lang="less" scoped>
    .ly-box {
        width: 100%;
        height: 100%;
        display: block;
        background: url("../../../src/assets/images/screen.jpg") no-repeat center;
        background-size: cover;
        overflow-y: auto;
        overflow-x: hidden;
        color: #f2f2f2;
        font-size: 14px;
        .ly-title{
            p{
                font-size: 16px;
                line-height: 34px;
                a{
                    float: right;
                    font-size: 12px;
                    color: #ccc;
                }
            }
        }
        .door-wrap{
            border: 1px solid #fac40d;
        }
        .ly-center {
            padding: 20px;
            padding-top: 0;
        }
        h1 {
            font-size: 30px;
            color: #fff;
            line-height: 60px;
            text-align: center;
        }
        .door-box {
            border: 1px solid red;
            .door-title {
                color: #dc6203;
                font-size: 15px;
                text-align: center;
            }
            #door-ul{
                width: 100%;
                height: 180px;
                line-height: 30px;
                overflow: hidden;
                transition: all 0.5s;
            }
            .doors-li{
                height: 30px;
                line-height: 30px;
                text-align: center;
            }
        }
    }


    .anim {
        transition: all 1.5s;
        margin-top: -34px;
    }

    #con1 li {
        list-style: none;
        line-height: 34px;
        height: 34px;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .grid-content {
        border-radius: 4px;
        height: 260px;
        width: 100%;
        display: block;
        overflow: hidden;
        border: 2px solid salmon;

    }

    .banner-box {
        height: 500px;
    }

    .money-box {
        height: 300px;
    }

    .img-bg {
        width: 100%;
        height: 500px;
        background-repeat: no-repeat;
        background-position: center;
        -webkit-background-size: cover;
        background-size: cover;
    }
</style>
